<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input id="num1" /> 
    <select name="" id="calc">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
    </select>
    <input id="num2" />
    <button id="btn">计算</button>
    结果：<input type="text" name="" id="res"/>


    <script>
        // 1.点击计算按钮的时候获取 num1 和 num2 的值 
        // 获取button 元素 
        var btnEle = document.getElementById("btn");
        // 获取 num1 和num2 元素 
        var num1Ele = document.getElementById("num1");
        var num2Ele = document.getElementById("num2");
        
        // 获取要显示结果的input框
        var resEle = document.getElementById("res");

        // 获取select 元素 
        var sleEle = document.getElementById("calc");
       
        // 点击元素的时候执行 函数内的代码 
        btnEle.onclick = function(){
            // num1Ele.value = 123;
            // 当按钮点击的时候会执行function 大括号里的代码
            // console.log(1111);
            // console.log(2222);
            // 点击btn的时候获取 num1 和num2 的值；
            var num1 = parseInt( num1Ele.value);
            var num2 = parseInt( num2Ele.value);
            // console.log(typeof num1);
            // console.log(num1,num2);
            // console.log(sleEle.value)
            var calc = sleEle.value;
            if(calc=="+"){
                var res = num1+num2;
            }else if(calc=="-"){
                var res = num1-num2;
            }else if(calc=="*"){
                var res = num1*num2;
            }else if(calc=="/"){
                var res = num1/num2;
            }
            console.log(res);
            resEle.value = res;
        }

        



    </script>
</body>
</html>